<template>
  <el-card>
    <div slot="header" class="header">
      <div class="category-header">
        <span>用户评分</span>
      </div>
    </div>
    <div>
      <div class="charts" ref="charts"></div>
    </div>
  </el-card>
</template>
<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import { reqDataList } from "@/api/echarts";
export default {
  name: "Category",
  mounted() {
    this.getData();
    this.getEchart();
  },
  data() {
    return {
      chart: [],
      gamelist: [],
      gradelist: [],
      obj: {},
    };
  },
  methods: {
    async getData() {
      let mycharts = echarts.init(this.$refs.charts);
      let res = await reqDataList();
      console.log(res);
      if (res.code == 200) {
        this.gamelist = res.gamenamelist2;
        this.gradelist = res.avggradelist;
        console.log(this.gamelist, this.avggradelist);
        for (var i = 0; i < this.gamelist.length; i++) {
          this.obj = {};
          this.obj.name = this.gamelist[i];
          this.obj.value = this.gradelist[i].toFixed(1);
          this.chart[i] = this.obj;
        }
        mycharts.setOption({
          title: {
            text: "游戏评分",
            left: "center",
            top: "center",
          },
          tooltip: {
            trigger: "item",
          },

          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: true,
              label: {
                show: true,
                position: "outside",
              },

              labelLine: {
                show: true,
              },
              data: this.chart,
            },
          ],
        });
        //echarts绑定事件
        mycharts.on("mouseover", (params) => {
          const { name, value } = params.data;

          mycharts.setOption({
            title: {
              text: name,
              subtext: value,
            },
          });
        });
      }
    },
  },
};
</script>
<style scoped>
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header {
  /* border-bottom: 1px #ccc dashed; */
  padding: 10px;
}
.charts {
  width: 100%;
  height: 300px;
}
</style>
